<template>
  <div class="left-container">
    <h2 ref="h2">Left</h2>
    <p ref="p">{{age}}</p>
    <button @click="age++">+1</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from '@/components/ArtList.vue'
export default {
  components: {
    ArtList
  },
  data () {
    return{
      age:20
    }
  },
  //第一个钩子函数
  // 1. beforeCreate 里面几乎什么都做不了，因为此时 data 数据、methods都没有准备好呢
  beforeCreate() {
    console.log('beforeCreate',this.age)
  },
  //第2个钩子函数
  // 2. created 里面可以使用 data、methods等等
  created() {
    console.log('created',this.age)
  },
  //第3个钩子函数
  // 3. beforeMount 里面还不能进行DOM操作，因为页面还没有渲染呢
  beforeMount() {
     console.log('beforeMount',this.$refs.h2)
  },
  //第4个钩子函数
  // 4. mounted 里面可以进行DOM操作了（此时页面已经渲染完毕
  mounted() {
     console.log('mounted',this.$refs.h2)
  },
  //更新阶段
  //第5个钩子函数
  //5. 数据更新了，但页面DOM结构还未更新
  beforeUpdate() {
    console.log('beforeUpdate',this.age,this.$refs.p.innerHTML)
  },
  //第6个钩子函数
  //6.数据更新了，页面DOM结构也更新了
  updated(){
    console.log('updated',this.age,this.$refs.p.innerHTML)
  },
  // 7. beforeDestroy
beforeDestroy() {
  console.log('第7个', '组件即将被销毁')
  console.log(this.$refs.artlistRef)  // 这里的artlistRef 是 子组件的ref
},
// 8. destroyed
destroyed() {
  console.log('第8个', '组件已经被销毁')
  console.log(this.$refs.artlistRef)  // 这里的artlistRef 是 子组件的ref
},
// errorCaptured (err,vm,info) {
//   console.log(err.message)  //输出错误描述信息
//   console.log(vm)  //发生错误的组件 的实例对象
//   console.log(info) //也是一个信息描述
//   return false  
// }
}
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>